<template>
  <div class="headers">
    <div @click="home"><img src="@/static/axkt9-og55w.png" alt=""></div>
    <div class="headers_f">
      <Syx-Screenfull/>
      <el-dropdown @command="handleCommand" v-if="userInfo">
        <div class="el-dropdown-link">
          <el-avatar :size="'large'" :src="userInfo.avatar"></el-avatar>
          <span>{{ userInfo.nickname }}</span>
          <i
              class="el-icon-arrow-down el-icon--right"></i>
        </div>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="a">个人信息</el-dropdown-item>
          <el-dropdown-item command="e" divided>登出</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
export default {
  name: "headers",
  data() {
    return {
      userInfo: null
    }
  },
  created() {
    this.userInfo = this.nativeplacestore.get("userLogin")?this.nativeplacestore.get("userLogin")['user']:null
  },
  methods: {
    handleCommand(command) {
      switch (command) {
        case "a":
          break;
        case "e":
          this.nativeplacestore.clear();
          this.$router.push("/login");
          break;
        default:
          this.$message({
            showClose: true,
            message: "未知点击",
            type: "warning",
          });
          break;
      }
    },
    home() {
      this.nativeplacestore.set("defaultActive", "/");
      this.$router.push("/");
    }
  }
}
</script>

<style scoped lang="scss">
.headers {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.headers_f {
  display: flex;
  align-items: center;
}

.el-dropdown-link {
  display: flex;
  align-items: center;

  .el-avatar {
    margin-left: 12px;
    margin-right: 12px;
  }
}
</style>